<template>
  <div>
    <nav-bar title="积分商城"/>
    <div class="header_bar">
      <div class="header_list_left">
        <img src="../../../../assets/img/my/ic_integral.png" alt="">
        <span>我的积分：{{userinfo.integral || 0}}</span>
      </div>
      <div class="header_list_right">
        <span>积分明细</span>
        <span class="line"></span>
        <span @click="explainShow = true">积分说明</span>
      </div>
    </div>
    <div class="content_box">
      <ul class="integral_box">
        <li class="integral_list" @click="detailClick(index)" v-for="(item, index) in list" :key="index">
          <img :src="item.icon" alt="">
          <div class="integral_info">
            <div class="coupon">{{item.amount}}元代金券</div>
            <div class="integral">¥{{item.full}}积分</div>
          </div>
          <div class="integral_btn">兑换</div>
        </li>
      </ul>
    </div>
    <!-- 积分说明 -->
    <van-popup v-model="explainShow" round>
      <popup-explain @explain-click="explainClick"/>
    </van-popup>
    <!-- 兑换券详情 -->
    <van-popup v-model="detailShow" position="bottom">
      <popup-integral @close-integral="closeIntegral"/>
    </van-popup>
  </div>
</template>

<script>
import NavBar from '../../../../components/common/navbar/NavBar.vue'
import PopupExplain from '../popup/PopupExplain.vue'
import PopupIntegral from '../popup/PopupIntegral.vue'
export default {
  components: {
    NavBar,
    PopupExplain,
    PopupIntegral
  },
  data() {
    return {
      userinfo: {},
      explainShow: false,
      detailShow: false,
      list: [
        {icon: require('../../../../assets/img/my/BT券.png'),amount: 5,full: 500},
        {icon: require('../../../../assets/img/my/H5券.png'),amount: 3,full: 300},
        {icon: require('../../../../assets/img/my/折扣券.png'),amount: 5,full: 500},
        {icon: require('../../../../assets/img/my/BT券.png'),amount: 5,full: 500},
        {icon: require('../../../../assets/img/my/H5券.png'),amount: 3,full: 300},
        {icon: require('../../../../assets/img/my/折扣券.png'),amount: 5,full: 500},
        {icon: require('../../../../assets/img/my/BT券.png'),amount: 5,full: 500},
        {icon: require('../../../../assets/img/my/H5券.png'),amount: 3,full: 300},
        {icon: require('../../../../assets/img/my/折扣券.png'),amount: 5,full: 500},
      ]
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      this.axios.get('/userinfo.json', {}).then(res => {
        this.userinfo = res.data.userinfo
      })
    },
    detailClick(index) {
      this.detailShow = true
    },
    explainClick() {
      this.explainShow = false
    },
    closeIntegral() {
      this.detailShow = false
    }
  },
}
</script>

<style lang="less" scoped>
.content_box {
    width: 10rem;
    position: fixed;
    top: 2.266667rem;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    overflow: auto;
}

.content_box::-webkit-scrollbar {
    display: none
}

.header_bar {
  box-sizing: border-box;
  padding: 0 .426667rem;
  width: 10rem;
  height: 1.093333rem;
  position: fixed;
  top: 1.173333rem;
  right: 0;
  left: 50%;
  background: #fff;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header_list_left {
  display: flex;
  align-items: center;
  font-size: .346667rem;
  font-weight: 500;
  color: #FF5543;
  img {
    margin-right: .106667rem;
    width: .453333rem;
    height: .453333rem;
  }
}

.header_list_right {
  font-size: .32rem;
  font-weight: 500;
  color: #0074FF;
  display: flex;
  align-items: center;
  .line {
    display: inline-block;
    width: .013333rem;
    height: .32rem;
    margin: 0 .266667rem;
    background: #0074FF;
  }
}

.integral_box {
  width: 9.146667rem;
  padding: 0 .426667rem;
  .integral_list {
    box-sizing: border-box;
    padding: .266667rem;
    width: 100%;
    height: 2.48rem;
    border-radius: .266667rem;
    background: #fff;
    margin-top: .133333rem;
    display: flex;
    align-items: center;
    img {
      flex-shrink: 1;
      margin-right: .266667rem;
      display: inline-block;
      width: 2.666667rem;
      height: 1.946667rem;
    }
    .integral_info {
      flex-grow: 1;
      .coupon {
        font-size: .4rem;
        font-weight: bold;
        color: #222222;
      }
      .integral {
        padding-top: .266667rem;
        font-size: .32rem;
        font-weight: 500;
        color: #FF5543;
      }
    }
    .integral_btn {
      flex-shrink: 1;
      width: 1.44rem;
      height: .613333rem;
      background: #FF5543;
      border-radius: .306667rem;
      font-size: .346667rem;
      color: #fff;
      text-align: center;
      line-height: .613333rem;
    }
  }
}
</style>